<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./test.js"></script>
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <style>
    #gameOverDiv {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background-color: #fff;
      border: 2px solid #000;
    }
  </style>
</head>
<body>
  <script>
    let gameOver = false;

    function setup() {
      createCanvas(400, 400);
    }

    function draw() {
      background(220);

      if (gameOver) {
        // 游戏结束时显示小窗口
        showGameOverWindow();
      } else {
        // 在这里添加你的游戏逻辑
        // ...
      }
    }

    function mousePressed() {
      // 模拟游戏结束条件
      gameOver = true;
    }

    function showGameOverWindow() {
      // 显示游戏结束的小窗口
      let gameOverDiv = select("#gameOverDiv");
      gameOverDiv.style("display", "block");
    }
  </script>

  <!-- 游戏结束的小窗口 -->
  <div id="gameOverDiv">
    <h2>Game Over</h2>
    <p>你的分数是：100</p>
    <button onclick="resetGame()">重新开始</button>
  </div>

  <script>
    // 重新开始游戏的函数
    function resetGame() {
      gameOver = false;
      let gameOverDiv = select("#gameOverDiv");
      gameOverDiv.style("display", "none");
    }
  </script>
</body>
</html>
